<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <rx-fit>
                    <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                        <div class="table-page-search-wrapper">
                            <a-form layout="inline">
                                <a-row :gutter="24">
                                    <a-col :span="8">
                                        <a-form-item :label="i18n('form.name','应用名称')">
                                            <a-input :placeholder="i18n('form.name','应用名称','input')" v-model="queryParam.Q_client_name__S_LK"/>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-item :label="i18n('form.code','应用编码')">
                                            <a-input :placeholder="i18n('form.code','应用编码','input')" v-model="queryParam.Q_client_code__S_LK"/>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :md="8" :sm="24">
                                  <span class="table-page-search-submitButtons">
                                    <a-button @click="handleQuery" icon="search" type="primary">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                                    <a-button @click="resetSearchList" style="margin-left: 4px">{{$ti18('rxList.resetBtn','重置')}}</a-button>
                                  </span>
                                    </a-col>
                                </a-row>
                            </a-form>
                        </div>
                    </div>
                    <rx-grid
                        ref="table"
                        :dataSource="query"
                        :allowRowSelect="true"
                        :multiSelect="false"
                        :showPage="false"
                        id-field="id"
                        :columns="columns"
                        @selectChange="onSelectChange"
                    >
                    </rx-grid>
                </rx-fit>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxDialog, RxLayout, RxGrid, Util, BaseList,RxFit} from "@lowcode/jpaas-common-lib";
import {mapState} from "vuex";
import SysAppApi from "@/api/system/core/sysApp";
export default {
    name: "AppDialog",
    mixins: [BaseList],
    components: {
        RxDialog,
        RxGrid,
        RxLayout,
        RxFit
    },
    props: {
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        }
    },
    computed: {
        ...mapState({
            menus: state => state.appSetting.menus
        })
    },
    data() {
        return {
            // 表头
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 100,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: this.i18n('form.code','应用编码'),
                    dataIndex: 'key',
                    width:150
                },
                {
                    title: this.i18n('form.name','应用名称'),
                    dataIndex: 'name',
                    width:150
                }
            ],
            appList:[],
            query:[]
        }
    },
    created() {
        this.menus.find(item=>{
            if(item.appType ==1){
                this.appList.push({
                    key:item.key,
                    name:this.$i18(item.title),
                    id:item.id
                });
            }
        })

        var self = this;
        if (this.appList.length == 0) {
            // 查询appType为1的应用
            SysAppApi.getAllUserAppsByAppName("").then(data => {
                if (data.length == 0) {
                    return
                }
                self.appList = data.map(app => {
                    return {key: app.clientCode , id: app.appId ,name:this.$i18(app.clientName) }
                })
                self.query=self.appList;
            })
        } else {
            this.query=this.appList;
        }
    },
    methods: {
        handleQuery(){
            let {Q_client_name__S_LK:name,Q_client_code__S_LK:code} = this.queryParam;
            this.query = this.appList.filter(item=>{
                return (!name && !code) || item.key == code || item.name.indexOf(name) != -1 ;
            })
            this.$refs['table'].loadData()
        },
        resetSearchList(){
            this.queryParam = {} ;
            this.query = this.appList;
            this.$refs['table'].loadData()
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"InsAppCollect",key);
        },
        handleSubmit(vm) {
            if(this.selectedRows.length==0){
                this.$message.error(this.i18n('msa.appSelectTips','请选择至少一个'));
                vm.loading=false;
                return;
            }
            Util.closeWindow(this,"ok",this.selectedRows[0])
        },
        cancel() {
            Util.closeWindow(this,"cancel")
        }
    },
    watch: {}
}
</script>

<style scoped>

</style>